<template>
  <div class="upload-container">
    <div class="upload-header">
      <h2 class="title">
        <i class="el-icon-upload title-icon"></i>
        文件上传
      </h2>
      <button class="close-btn" @click="closeUpload">
        <span class="x-icon">×</span>
      </button>
    </div>

    <div class="upload-content">
      <div class="form-group">
        <label for="taskName" class="form-label">任务名称</label>
        <div class="input-wrapper">
          <i class="el-icon-s-order input-icon"></i>
          <input 
            type="text" 
            id="taskName"
            v-model="taskName" 
            placeholder="请输入任务名称" 
            class="form-input"
          />
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">选择文件</label>
        <div 
          class="file-drop-area"
          :class="{ 'drag-over': isDragging }"
          @dragover.prevent="onDragOver"
          @dragleave.prevent="onDragLeave"
          @drop.prevent="onFileDrop"
        >
          <input 
            type="file" 
            ref="fileInput" 
            @change="onFileChange" 
            class="file-input" 
            id="fileInput"
          />
          <div class="drop-message">
            <i class="el-icon-upload upload-icon"></i>
            <p>拖拽文件到此处或 <label for="fileInput" class="browse-link">浏览文件</label></p>
            <p v-if="selectedFile" class="selected-file-name">
              <i class="el-icon-document"></i>
              {{ selectedFile.name }}
              <span class="file-size">{{ formatFileSize(selectedFile.size) }}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="upload-actions">
        <button @click="uploadFile" class="upload-btn" :disabled="isUploading">
          <i class="el-icon-upload2"></i> 
          {{ isUploading ? '上传中...' : '上传文件' }}
        </button>
        <button @click="resetForm" class="reset-btn" :disabled="isUploading">
          <i class="el-icon-refresh"></i> 重置
        </button>
      </div>

      <div v-if="isUploading" class="upload-progress">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
        </div>
        <div class="progress-text">{{ uploadProgress }}%</div>
      </div>

      <div v-if="uploadMessage" class="upload-message" :class="messageType">
        <i :class="messageIcon"></i>
        {{ uploadMessage }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  emits: ['close'],
  data() {
    return {
      taskName: '',
      selectedFile: null,
      isUploading: false,
      uploadProgress: 0,
      uploadMessage: '',
      messageType: '',
      isDragging: false
    };
  },
  computed: {
    messageIcon() {
      return this.messageType === 'success' 
        ? 'el-icon-success' 
        : 'el-icon-error';
    }
  },
  methods: {
    onFileChange(event) {
      this.selectedFile = event.target.files[0];
      this.uploadMessage = '';
    },
    onDragOver() {
      this.isDragging = true;
    },
    onDragLeave() {
      this.isDragging = false;
    },
    onFileDrop(event) {
      this.isDragging = false;
      if (event.dataTransfer.files.length) {
        this.selectedFile = event.dataTransfer.files[0];
        this.uploadMessage = '';
      }
    },
    async uploadFile() {
      if (!this.taskName) {
        this.showMessage('请输入任务名称', 'error');
        return;
      }
      if (!this.selectedFile) {
        this.showMessage('请选择要上传的文件', 'error');
        return;
      }

      this.isUploading = true;
      this.uploadProgress = 0;
      this.uploadMessage = '';

      const formData = new FormData();
      formData.append('file', this.selectedFile);
      formData.append('taskName', this.taskName);

      try {
        await axios.post('http://localhost:8080/api/resources/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          }
        });
        
        this.showMessage('文件上传成功！', 'success');
        this.resetForm();
        
        // 上传成功后3秒关闭对话框
        setTimeout(() => {
          this.$emit('close');
        }, 3000);
      } catch (error) {
        console.error('上传失败:', error);
        this.showMessage('文件上传失败，请重试', 'error');
      } finally {
        this.isUploading = false;
      }
    },
    resetForm() {
      this.taskName = '';
      this.selectedFile = null;
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = '';
      }
    },
    showMessage(message, type) {
      this.uploadMessage = message;
      this.messageType = type;
      
      // 5秒后自动清除消息
      setTimeout(() => {
        this.uploadMessage = '';
      }, 5000);
    },
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    closeUpload() {
      console.log('关闭上传窗口');
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.upload-container {
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.upload-header {
  background: linear-gradient(135deg, #f0f5ff, #f6f9ff);
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #6c8cff, transparent);
}

.title {
  color: #2c5282;
  font-size: 20px;
  margin: 0;
  display: flex;
  align-items: center;
}

.title-icon {
  color: #6c8cff;
  margin-right: 12px;
  font-size: 24px;
}

.close-btn {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #4a5568;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: auto;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: static;
  padding: 0;
  line-height: 1;
}

.x-icon {
  font-size: 24px;
  font-weight: 600;
  display: block;
  line-height: 24px;
  margin-top: -2px;
}

.close-btn:hover {
  background-color: #f0f5ff;
  color: #6c8cff;
  transform: rotate(90deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.upload-content {
  padding: 25px;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #4a5568;
  font-size: 15px;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0aec0;
  font-size: 18px;
}

.form-input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  color: #4a5568;
  transition: all 0.3s;
  background-color: #f8fafc;
}

.form-input:focus {
  outline: none;
  border-color: #6c8cff;
  box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.2);
  background-color: #fff;
}

.form-input::placeholder {
  color: #a0aec0;
}

.file-drop-area {
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s;
  background-color: #f8fafc;
  cursor: pointer;
}

.file-drop-area:hover {
  border-color: #6c8cff;
  background-color: #f0f5ff;
}

.drag-over {
  border-color: #6c8cff;
  background-color: #f0f5ff;
  box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.2);
}

.file-input {
  display: none;
}

.drop-message {
  color: #4a5568;
}

.upload-icon {
  font-size: 52px;
  color: #6c8cff;
  margin-bottom: 15px;
  display: block;
  opacity: 0.8;
}

.browse-link {
  color: #6c8cff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.selected-file-name {
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #f0f5ff;
  border-radius: 8px;
  color: #2c5282;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 5px rgba(108, 140, 255, 0.1);
}

.selected-file-name i {
  color: #6c8cff;
  font-size: 20px;
}

.file-size {
  color: #718096;
  font-size: 13px;
  margin-left: 8px;
  font-weight: normal;
}

.upload-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.upload-btn {
  flex: 1;
  background: linear-gradient(135deg, #6c8cff, #5a78e6);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 25px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(108, 140, 255, 0.3);
}

.upload-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a78e6, #4967d5);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(108, 140, 255, 0.4);
}

.upload-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(108, 140, 255, 0.3);
}

.upload-btn:disabled {
  background: linear-gradient(135deg, #a0aec0, #cbd5e0);
  cursor: not-allowed;
  box-shadow: none;
}

.reset-btn {
  background-color: #f0f5ff;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 25px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.reset-btn:hover:not(:disabled) {
  background-color: #e2e8f0;
  color: #2d3748;
}

.reset-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.upload-progress {
  margin: 25px 0;
}

.progress-bar {
  height: 10px;
  background-color: #edf2f7;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #6c8cff, #5a78e6);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: right;
  font-size: 14px;
  color: #718096;
  font-weight: 500;
}

.upload-message {
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeIn 0.3s ease-out;
}

.success {
  background-color: #c6f6d5;
  color: #2f855a;
  border-left: 4px solid #48bb78;
}

.error {
  background-color: #fed7d7;
  color: #c53030;
  border-left: 4px solid #f56565;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .upload-content {
    padding: 20px 15px;
  }
  
  .title {
    font-size: 18px;
  }
  
  .upload-actions {
    flex-direction: column;
  }
  
  .upload-btn, .reset-btn {
    width: 100%;
  }
  
  .file-drop-area {
    padding: 30px 15px;
  }
  
  .upload-icon {
    font-size: 40px;
  }
  
  .selected-file-name {
    padding: 10px 15px;
    font-size: 14px;
    flex-direction: column;
    gap: 5px;
  }
}
</style>